<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #div1{
            width:150px;height:200px; background:green; position:relative;
           left:-150px;
        }
        #div1 span{
            width:20px;height:60px; line-height:20px; background:gold; position:absolute;
            right:-20px; top:70px;
        }
    </style>
    <script>
        window.onload=function(){
            var oDiv=document.getElementById('div1');
            oDiv.onmouseover=function(){
                startmove();
            };

            oDiv.onmouseout=function(){
                startmove2();
            };




         var timer=unll;
         //物体向右运动
        function startmove(){   //构造一个运动的函数框架
          clearInterval(timer);  //先关闭定时器
          timer=setInterval(function(){   //再重新开一个定时器
             if(oDiv.offsetLeft==0){  //物体运动到0位置，关闭定时器
                 clearInterval(timer);
             }
             else{  //否则就向右匀速运动
                 oDiv.style.left=oDiv.offsetLeft+10+'px';
             }
          },30);
        }

            //物体向左运动
            function startmove2(){   //构造一个运动的函数框架
                clearInterval(timer);  //先关闭定时器
                timer=setInterval(function(){   //再重新开一个定时器
                    if(oDiv.offsetLeft==-150){  //物体运动到-150位置，关闭定时器
                        clearInterval(timer);
                    }
                    else{  //否则就向右匀速运动
                        oDiv.style.left=oDiv.offsetLeft-10+'px';
                    }
                },30);
            }
        };
    </script>
</head>
<body>
<div id="div1">
    <span>分享</span>
</div>
</body>
</html>